import React from 'react'
import HeaderAvatar from "../HeaderAvatar/HeaderAvatar"
import './LoginHeader.css'
import LvMark from "../../../../../shared-components/LvMark/LvMark";
import VipIcon from "../../../../../res/images/web/my/vip kim@2x.png"
import RightBtn from "../../../../../res/images/web/my/get vip bg@2x.png"
import SmallTr from "../../../../../res/images/web/my/little triangle red@2x (1).png"


const LoginHeader = props => {

    const {
        history,
        avatarUrl,
        userDetail,
    } = props
    const {Vip,} = userDetail


    // const userRightContent = (
    //     <div
    //         onClick={() => history.push('apply-star')}
    //         className='my-login-header-right-user'
    //     >
    //         <p className='my-login-header-right-user-text'>成为主播</p>
    //         <Icon type='right'/>
    //     </div>
    // )
    //
    // const steamerRightContent = (
    //     <div
    //         className='my-login-header-right-steamer'
    //         // onClick={onOpenLive}
    //     >
    //         <img src={RecordBtn} alt='record button'/>
    //         <span
    //             className='my-login-header-right-steamer-text'
    //             onClick={() => history.push('./start-live')}
    //         >录制视频</span>
    //     </div>
    // )

    const isVip = Vip > 0
    // const vipIcon = <span className='my-login-header-vip' style={{marginRight: '4px'}}>
    //     VIP
    // </span>
    const vipIcon = <img alt='' src={VipIcon} style={{width: '37px', marginRight: '4px',}}/>

    const rightContent = <div
        className='my-header-right-btn'

    >
        <img src={RightBtn} alt='' style={{width: 110, height: 32,}}/>
        <span
            className='my-header-right-btn-txt'
            onClick={() => history.push('./vip-goods')}
        >{isVip ? '立即续费' : '获取会员'}</span>
        <img src={SmallTr} alt='' className='my-header-right-btn-tr'/>
    </div>

    return (
        <React.Fragment>
            <HeaderAvatar avatarUrl={avatarUrl}/>
            {/*<Icon />*/}
            <div style={{marginLeft: '0.8rem', zIndex: 1,}}>
                <p className='my-login-header-nickname'
                   style={{color: isVip ? 'rgb(250, 114, 104)' : '#fff'}}
                >
                    {userDetail.Nickname}
                </p>
                <div className='flex-align-center'>
                    {isVip ? vipIcon : null}
                    <LvMark lv={userDetail.Viplevel}/>
                </div>
            </div>
            {rightContent}
            {/*{userDetail.IsStar ? steamerRightContent : userRightContent}*/}
        </React.Fragment>
    )
}

export default LoginHeader
